<template>
  <div>
    <div v-if="hasUser">
      <el-row style="line-height: 20px">
        <el-col :span="15" class="top-label">
          <h5>项目: </h5> 
          <a href="javascript:void(0)" :title="timesUser.projectName">{{ projectName }}</a>
        </el-col>
        <el-col :span="8" class="top-label">
          <h5 style="width: 50px">负责人: </h5>
          <span>{{ timesUser.projectleader }}</span>
        </el-col>
        <el-col :span="1">
          <i class="el-icon-setting pointer" @click="reset" v-show="hasUser"></i>
        </el-col>
      </el-row>
      <one-time v-for="time in times" :time="time"></one-time>
      <!-- 开发环境下显示，用于登录用户，必然会返回失败，但是session已创建成功，不影响后续功能，点击后需刷新页面 -->
      <el-button type="primary" @click="devLogin" v-show="isDev" style="margin-top: 10px">测试登录</el-button>
    </div>
    <setting-time v-if="! hasUser"></setting-time>
  </div>
</template>
<script type="text/javascript">
  import { mapGetters, mapMutations, mapActions } from 'vuex'
  import oneTime from './one-time.vue'
  import settingTime from './setting-time.vue'
  export default {
    data () {
      return {}
    },
    computed: {
      ... mapGetters(['times', 'isDev', 'timesUser']),
      hasUser () {
        return this.timesUser && this.timesUser.userName
      },
      projectName () {
        return this.timesUser.projectName.length > 15 ? (this.timesUser.projectName.substr(0, 14) + '...') : this.timesUser.projectName
      }
    },
    mounted() {
      this.loadUser()
      this.hasUser && this.getTimes().then(() => {
      }).catch(message => {
        this.$message.error('获取工时失败:' + message)
      })
    },
    methods: {
      ... mapMutations(['setUser', 'loadUser', 'saveUser']),
      ... mapActions(['login', 'getTimes']),
      reset() {
        this.$confirm('重新设置工时用户?').then(() => {
          this.setUser({})
          this.$message('重置成功')
        }).catch(() => {})
      },
      devLogin () {
        this.login(true)
        .then(data => {
          this.$message(data)
        })
        .catch(error => {
          this.$message(error)
        })
      }
    },
    components: {
      settingTime, oneTime
    }
  }
</script>